<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>示例</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <style type="text/css">
        h2 {
            margin: 30px
        }

        #imgChangeIdLeft,
        #imgChangeIdTop {
            margin: 20px auto
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>1.SlideLeft</h2>
        <code> {"type":"slideLeft"}</code>
        <div id="imgChangeIdLeft"></div>

        <h2>2.SlideTop</h2>
        <code> {"type":"slideTop"}</code>
        <div id="imgChangeIdTop"></div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="imgChange.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //配置变量，可根据自己需求修改    
        var imgobj1 = {
            "autoChange": //自动轮换
            {
                "isAuto": true, //是否开启自动轮换，true开启，false关闭
                "time": 5, //自动轮换间隔时间，单位秒
                "keepTime": 0.4, //自动轮换一次所需时间，单位秒
                "type": "slideLeft",//(Math.floor(Math.random() * 10 + 1)) >= 5 ? "slideTop" : "slideLeft", //轮换方式，现有slideLeft和slideTop两种选择
            },
            "imgBtn": //焦点轮换
            {
                "is": true, //是否开启焦点轮换，true开启，false关闭
                "top": 20, //焦点与图片顶端的距离，单位px
                "left": 10, //焦点与图片左端的距离，单位px
                "size": 14, //焦点的大小，单位px
                "interval": 10, //焦点间的间隔，单位px
                "color": "rgba(255,255,255,0.45)", //焦点的颜色
                "type": "" //焦点的类型，circular为圆形，其他为方形
            },
            "imgTips": {//图片上面显示的文字信息，内容为title的内容
                "is": true,//是否开启显示文字，true开启，false关闭
                "height": 50,//tips高度
                "top": 0,//250,//与图片顶端的距离，单位px
                "fontSize": 20,//字体大小
                "textAlign": "center",//文本位置
                "color": "#fff",//字体颜色
                "background": "rgba(0,0,0,0.45)",//tips背景颜色
            },
            "prevNext": true, // 是否开启上一页 下一页
            "imgWidth": 1000, //图片宽度
            "imgHeight": 600, //图片高度
            "imgUrl": [ //图片地址，可以自由修改内容和数目
                "./img/bg81.jpg",
                "./img/bg82.jpg",
                "./img/bg78.jpg",
                "./img/bg52.jpg"
            ],
            "title": [ //图片标题，可以自由修改内容和数目，数目和顺序需要与图片地址保持一致
                "风景81",
                "风景82",
                "风景78",
                "风景52"
            ],
            "href": [ //点击图片跳转链接，可以自由修改内容和数目，数目和顺序需要与图片地址保持一致
                "./img/bg81.jpg",
                "./img/bg82.jpg",
                "./img/bg78.jpg",
                "./img/bg52.jpg"
            ]
        }
        imgChange("imgChangeIdLeft", imgobj1); //调用轮换函数，传参整体大容器id与配置信息

        var imgobj2 = {
            "autoChange": //自动轮换
            {
                "isAuto": true, //是否开启自动轮换，true开启，false关闭
                "time": 5, //自动轮换间隔时间，单位秒
                "keepTime": 0.4, //自动轮换一次所需时间，单位秒
                "type": "slideTop",//(Math.floor(Math.random() * 10 + 1)) >= 5 ? "slideTop" : "slideLeft", //轮换方式，现有slideLeft和slideTop两种选择
            },
            "imgBtn": //焦点轮换
            {
                "is": true, //是否开启焦点轮换，true开启，false关闭
                "top": 570, //焦点与图片顶端的距离，单位px
                "left": 880, //焦点与图片左端的距离，单位px
                "size": 14, //焦点的大小，单位px
                "interval": 10, //焦点间的间隔，单位px
                "color": "rgba(255,255,255,0.45)", //焦点的颜色
                "type": "circular" //焦点的类型，circular为圆形，其他为方形
            },
            "imgTips": {//图片上面显示的文字信息，内容为title的内容
                "is": true,//是否开启显示文字，true开启，false关闭
                "height": 50,//tips高度
                "top": 550,//250,//与图片顶端的距离，单位px
                "fontSize": 20,//字体大小
                "textAlign": "center",//文本位置
                "color": "#fff",//字体颜色
                "background": "rgba(0,0,0,0.45)",//tips背景颜色
            },
            "prevNext": true, // 是否开启上一页 下一页
            "imgWidth": 1000, //图片宽度
            "imgHeight": 600, //图片高度
            "imgUrl": [ //图片地址，可以自由修改内容和数目
                "./img/bg35.jpg",
                "./img/bg52.jpg",
                "./img/bg78.jpg",
                "./img/bg79.jpg"
            ],
            "title": [ //图片标题，可以自由修改内容和数目，数目和顺序需要与图片地址保持一致
                "风景35",
                "风景52",
                "风景78",
                "风景79"
            ],
            "href": [ //点击图片跳转链接，可以自由修改内容和数目，数目和顺序需要与图片地址保持一致
                "./img/bg35.jpg",
                "./img/bg52.jpg",
                "./img/bg78.jpg",
                "./img/bg79.jpg"
            ]
        }
        imgChange("imgChangeIdTop", imgobj2); //调用轮换函数，传参整体大容器id与配置信息
    })
</script>

</html>